import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/*
Container是我们要介绍的最后一个容器类widget，
它本身不对应具体的RenderObject，它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等widget的一个组合widget。
所以我们只需通过一个Container可以实现同时需要装饰、变换、限制的场景
*/
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          brightness: Brightness.dark,
          // primaryColor: Colors.lightBlue[800],
          // accentColor: Colors.cyan[600],
        ),
        home: new Scaffold(
          appBar: new AppBar(
            title: new Text('Container'),
            centerTitle: true,
          ),
          body: new Container(
            margin: EdgeInsets.all(100),
            constraints: new BoxConstraints.tightFor(width: 200, height: 150),
            decoration: new BoxDecoration(
              // gradient: LinearGradient(colors: [Colors.red, Colors.black]),
              gradient: RadialGradient(
                  colors: [Colors.red, Colors.orange],
                  center: Alignment.topLeft,
                  radius: 0.98),
              boxShadow: [
                new BoxShadow(
                  color: Colors.white,
                  offset: Offset(0, 2),
                  blurRadius: 2,
                )
              ],
              borderRadius: BorderRadius.circular(10)
            ),
            transform: new Matrix4.skewY(0.2),
            alignment: Alignment.center,
            child: new Text(
              '5.20',
              style: TextStyle(fontSize: 40),
            ),
          ),
        ));
  }
}
